<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>会议</title>
<link rel="stylesheet" type="text/css" href="./css/font.min.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script type="text/javascript" src="./javascript/taoyao.js"></script>
</head>
<body>
	<div class="taoyao" id="app">
		<div class="handler">
			<a class="create icon-make-group" title="创建会议" @click="create"></a>
			<a class="invite icon-address-book" title="邀请会议" @click="invite"></a>
			<a class="enter icon-enter" title="进入会议" @click="enter"></a>
			<a class="leave icon-exit" title="离开会议" @click="leave"></a>
			<a class="close icon-switch" title="关闭会议" @click="close"></a>
		</div>
		<div class="list">
			<div class="meeting me">
				<div class="video">
					<video id="local"></video>
				</div>
				<div class="handler">
					<a class="audio icon-volume-medium" title="音频状态" @click="audioSelf"></a>
					<a class="video icon-play2" title="视频状态" @click="videoSelf"></a>
					<a class="record icon-radio-checked" title="录制视频" @click="recordSelf"></a>
				</div>
			</div>
			<div class="meeting" v-for="client in this.remoteClient" :key="client.sn">
				<div class="video">
					<video v-bind:id="client.sn"></video>
				</div>
				<div class="handler">
					<a class="audio" title="音频状态" v-bind:class="client.audioStatus?'icon-volume-medium':'icon-volume-mute2'" @click="audio(client.sn)"></a>
					<a class="video" title="视频状态" v-bind:class="client.videoStatus?'icon-play2':'icon-stop'" @click="video(client.sn)"></a>
					<a class="record icon-radio-checked" title="录制视频" v-bind:class="client.recordStatus?'active':''" @click="record(client.sn)"></a>
					<a class="expel icon-cancel-circle" title="踢出会议" @click="expel(client.sn)"></a>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
	const vue = new Vue({
		el: "#app",
		data: {
			taoyao: null,
			remoteClient: [],
			meetingId: null
		},
		mounted() {
			let self = this;
			this.taoyao = new Taoyao();
			this.remoteClient = this.taoyao.remoteClient;
			// 打开信令通道
			this.taoyao
				.buildChannel(self.callback)
				.then(e => console.debug('信令通道连接成功'));
			// 打开媒体通道
			this.taoyao.buildLocalMedia()
				.then(stream => {
					self.taoyao.buildMediaChannel('local', stream);
				})
				.catch(e => {
					console.error('打开终端媒体失败', e);
					// 方便相同电脑测试
					self.taoyao.buildMediaChannel('local', null);
				});
		},
		beforeDestroy() {
		},
		methods: {
			// 信令回调：返回true表示已经处理
			callback: function(data) {
				let self = this;
				switch(data.header.pid) {
				case signalProtocol.client.config:
					// 如果需要下发配置生效需要在此打开媒体通道
					return false;
				}
				return false;
			},
			// 创建会议
			create: function(event) {
				let self = this;
				this.taoyao.meetingCreate(data => {
					self.taoyao.meetingEnter(data.body.id);
					return true;
				});
			},
			// 会议邀请
			invite: function(sn) {
			},
			// 进入会议
			enter: function(sn) {
				let id = prompt('房间标识');
				if(id) {
					this.taoyao.meetingEnter(id);
				}
			},
			// 离开会议
			leave: function(sn) {
			},
			// 关闭会议
			close: function(sn) {
			},
			// 控制音频
			audio: function(sn) {
				this.client(sn).audio = !this.client(sn).audio;
			},
			// 控制视频
			video: function(sn) {
				this.client(sn).video = !this.client(sn).video;
			},
			// 录制视频
			record: function(sn) {
				this.client(sn).record = !this.client(sn).record;
			},
			// 踢出会议
			expel: function(sn) {
			},
			// 控制音频
			audioSelf: function(sn) {
			},
			// 控制视频
			videoSelf: function(sn) {
			},
			// 录制视频
			recordSelf: function(sn) {
			}
		}
	});
	</script>
</body>
</html>